<template>
	<div class="betting-name" :class="!inline ? 'inline-flex justify-center items-center' : 'inline'">
		<div :class="{ 'text-center truncate': !inline }">
			{{ text }}
		</div>
		<template v-if="hasPoint">
			<div v-if="!animated" class="ml-1" :class="trendClass">{{ point }}</div>
			<base-number-flip v-else class="ml-1" :value="point" />
		</template>
	</div>
</template>

<script lang="ts" setup>
import { BaseNumberFlip } from '@/components/base'
import { computed } from 'vue'
import { t, RegBettingPoints, getBettingCode } from '@/utils'
import { BettingType } from '@/enums'

const props = defineProps({
	betslipLine: {
		type: String,
		default: ''
	},
	points: {
		type: [Number, String]
	},
	side: {
		type: Number
	},
	trend: {
		type: String,
		default: ''
	},
	marketTypeCate: {
		type: String,
		default: ''
	},
	id: {
		type: String,
		default: ''
	},
	animated: {
		type: Boolean,
		default: false
	},
	inline: {
		type: Boolean,
		default: false
	}
})

const trendClass = computed(() => {
	if (props.trend === 'up') {
		return 'text-success'
	} else if (props.trend === 'down') {
		return 'text-danger'
	} else {
		return ''
	}
})

const hasPoint = computed(
	() =>
		props.points !== undefined &&
		props.points !== null &&
		props.points !== '' &&
		!isNaN(+props.points)
)

const isHandicap = computed(() => props.id.substring(1, 3) === getBettingCode(BettingType.handicap))

const isOU = computed(
	() =>
		props.marketTypeCate === BettingType.ou ||
		props.id?.substring(1, 3) === getBettingCode(BettingType.ou)
)

const text = computed(() => {
	let betslipLine = props.betslipLine
	if (!betslipLine) {
		return ''
	}
	if (betslipLine === 'X') {
		betslipLine = t('betting.draw')
	} else if (isOU.value) {
		// const arr = betslipLine.split(' ')
		// if (arr.length > 1 && props.side) {
		// 	let ou = ''
		// 	if (props.side === 1) {
		// 		ou = t('betting.over')
		// 	} else {
		// 		ou = t('betting.under')
		// 	}
		// 	if (ou) {
		// 		betslipLine = ou + ' ' + arr[1]
		// 	}
		// }
	}
	const pointInx = betslipLine.search(RegBettingPoints)
	if (pointInx > -1 && !isNaN(props.points as any)) {
		return betslipLine.substring(0, pointInx + 1)
	}
	return betslipLine
})

const point = computed(() => {
	let points = !isNaN(props.points as any) ? props.points : ''
	if (isHandicap.value) {
		if (props.points && +props.points > 0) {
			points = '+' + points
		} else if (
			text.value.search(RegBettingPoints) === -1 &&
			(props.points === undefined || props.points === null)
		) {
			points = ' 0'
		}
	}
	return points
})
</script>

<style lang="scss" scoped>
.betting-name {
	&.inline {
		div {
			display: inline !important;
		}
	}
}
</style>
